function readJSON() { 
 
    // Check if the hikes object exists in local storage 
    let hikes = localStorage.getItem('hikes'); 
    if (!hikes) { 
      document.getElementById('hikeCards').innerHTML = '<p>No hikes found.</p>'; 
    } else { 
      hikes = JSON.parse(hikes); 
       
      // Iterate over the hikes and create Bootstrap cards dynamically 
      hikes.hikes.forEach(hike => { 
        // Create card elements 
        const card = document.createElement('div'); 
        card.classList.add('card', 'col-md-4'); 
 
        const cardBody = document.createElement('div'); 
        cardBody.classList.add('card-body'); 
 
        const title = document.createElement('h5'); 
        title.classList.add('card-title'); 
 
        title.textContent = hike.name; 
 
        const distance = document.createElement('p'); 
        distance.classList.add('card-text'); 
        distance.textContent = 'Seating capacity: ' + hike.distance; 
 
        const location = document.createElement('p'); 
        location.classList.add('card-text'); 
        location.textContent = 'Color: ' + hike.location; 
 
        // Append elements to the card 
        cardBody.appendChild(title); 
        cardBody.appendChild(distance); 
        cardBody.appendChild(location); 
        card.appendChild(cardBody); 
 
        // Append card to the container 
        document.getElementById('hikeCards').appendChild(card); 
      }); 
    } 
} 
readJSON();